<!--
  Copyright 2012-2019 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!-- clearfix is needed for smaller screens where gt-config-return-link is floated  -->
<div class="clearfix">
  <a class="gt-config-return-link"
     href="config/alert-list{{agentQueryString()}}">
    Return to list
  </a>
</div>
<div class="card">
  <div class="card-header">
    <h2 ng-class="{'gt-lighten-font': !loaded && !httpError}">
      Alerts
      <span class="d-inline-block gt-separator">
        |
      </span>
      <span style="font-size: 24px;">{{heading}}</span>
    </h2>
  </div>
  <div class="card-body">
    <div ng-include src="'template/gt-loading-overlay.html'"></div>
    <div ng-include src="'template/gt-http-error-overlay.html'"></div>
    <!-- intentionally not using gt-form-autofocus-on-first-input as it doesn't make the most sense on this form -->
    <form name="formCtrl"
          style="padding-top: 15px;"
          novalidate>
      <fieldset class="gt-fieldset">
        <legend class="gt-legend">
          Condition
        </legend>
        <div class="form-group row"
             ng-if="layout.central">
          <div class="col-xl-3 gt-form-label-xl">
            Based on
          </div>
          <div class="col-xl-9">
            <div class="form-check">
              <label class="form-check-label">
                <input class="form-check-input"
                       type="radio"
                       ng-model="config.condition.conditionType"
                       ng-disabled="!agentRollup.permissions.config.edit.alerts"
                       value="metric">
                Metric
              </label>
            </div>
            <div class="form-check">
              <label class="form-check-label">
                <input class="form-check-input"
                       type="radio"
                       ng-model="config.condition.conditionType"
                       ng-disabled="!agentRollup.permissions.config.edit.alerts"
                       value="synthetic-monitor">
                Synthetic monitor
              </label>
            </div>
            <div class="form-check">
              <label class="form-check-label">
                <input class="form-check-input"
                       type="radio"
                       ng-model="config.condition.conditionType"
                       ng-disabled="!agentRollup.permissions.config.edit.alerts"
                       value="heartbeat">
                Heartbeat
              </label>
            </div>
          </div>
        </div>
        <div ng-if="config.condition.conditionType === 'metric'">
          <div class="form-group row">
            <label class="col-xl-3 gt-form-label-xl"
                   for="conditionMetric">
              Metric
            </label>
            <div class="col-xl-9">
              <select ng-model="config.condition.metric"
                      ng-disabled="!agentRollup.permissions.config.edit.alerts"
                      ng-required="config.condition.conditionType === 'metric'"
                      class="custom-select"
                      name="conditionMetric"
                      id="conditionMetric"
                      style="width: auto;">
                <option value="" ng-disabled="config.condition.metricName"></option>
                <option ng-repeat="metric in metrics track by metric.id"
                        ng-value="metric.id"
                        ng-disabled="metric.disabled"
                        ng-style="{'font-weight': metric.heading ? 'bold' : 'normal'}">
                  {{metric.display}}
                </option>
              </select>
              <div class="help-block">
                The metric that this alert monitors.
              </div>
            </div>
          </div>
          <div class="form-group row"
               ng-if="showTransactionTypeAndName()">
            <label class="col-xl-3 gt-form-label-xl"
                   for="transactionType">
              Transaction type
            </label>
            <div class="col-xl-9">
              <select ng-model="config.condition.transactionType"
                      class="custom-select"
                      ng-required="loaded"
                      ng-disabled="!agentRollup.permissions.config.edit.alerts"
                      name="transactionType"
                      id="transactionType"
                      style="width: auto;">
                <option ng-repeat="transactionType in transactionTypes()"
                        ng-value="transactionType">
                  {{transactionType}}
                </option>
                <option ng-value="config.condition.transactionType"
                        disabled
                        ng-if="config.condition.transactionType && transactionTypes().indexOf(config.condition.transactionType) === -1">
                  {{config.condition.transactionType}} (not available)
                </option>
              </select>
              <div class="help-block">
                The transaction type that this alert monitors.
              </div>
            </div>
          </div>
          <div gt-form-group
               gt-label="Transaction name"
               gt-model="config.condition.transactionName"
               gt-disabled="!agentRollup.permissions.config.edit.alerts"
               gt-width="30em"
               ng-if="showTransactionTypeAndName()">
            <div class="help-block">
              (Optional) The transaction name that this alert monitors.
            </div>
          </div>
          <div gt-form-group
               gt-label="Percentile"
               gt-model="config.condition.percentile"
               gt-number="true"
               gt-pattern="pattern.percentage"
               gt-required="loaded"
               gt-disabled="!agentRollup.permissions.config.edit.alerts"
               gt-width="7em"
               gt-addon="percentile"
               ng-if="config.condition.metric === 'transaction:x-percentile'">
            <div class="help-block">
              The transaction response time percentile to use for alerting.
            </div>
          </div>
          <div gt-form-group
               gt-label="Error message filter"
               gt-model="config.condition.errorMessageFilter"
               gt-disabled="!agentRollup.permissions.config.edit.alerts"
               gt-width="30em"
               ng-if="config.condition.metric === 'error:count'">
            <div class="help-block">
              (Optional) Count errors that contain this text in the error message. The comparison is case-sensitive.
              Enclose the text in forward slashes to use a
              <a href="https://docs.oracle.com/javase/8/docs/api/java/util/regex/Pattern.html">regular expression</a>,
              e.g. <code>/Read timed out|Connection reset/</code> will count errors that contains either
              "Read timed out" or "Connection reset" in the error message.
            </div>
          </div>
          <div class="form-group row">
            <label class="col-xl-3 gt-form-label-xl"
                   for="conditionThreshold">
              Threshold
            </label>
            <div class="col-xl-9">
              <div ng-class="{'input-group' : unit}">
                <input type="text"
                       class="form-control"
                       ng-model="page.conditionThreshold"
                       ng-pattern="config.condition.metric === 'error:rate' ? pattern.percentage : pattern.double"
                       ng-disabled="!agentRollup.permissions.config.edit.alerts"
                       ng-required="loaded"
                       name="conditionThreshold"
                       id="conditionThreshold"
                       style="max-width: 7em;">
                <div class="input-group-append"
                     ng-if="unit && unit !== ' bytes'">
                  <span class="input-group-text">{{unit}}</span>
                </div>
                <!-- need to place validation blocks before dropdown and use order-1 to shift them due to
                     https://github.com/twbs/bootstrap/issues/25110 -->
                <div class="gt-invalid-required-feedback order-1">
                  This is required.
                </div>
                <div class="gt-invalid-other-feedback order-1">
                  This is invalid.
                </div>
                <div gt-input-group-dropdown
                     gt-model="page.conditionThresholdByteUnit"
                     gt-items="conditionThresholdByteUnits"
                     class="input-group-append"
                     ng-if="unit === ' bytes'">
                </div>
              </div>
              <div class="help-block">
                If the {{phraseForValue()}} over the given time period is greater than or equal to this threshold, then
                alert will be triggered.
              </div>
            </div>
          </div>
          <div gt-form-group
               gt-type="checkbox"
               gt-label="Lower bound threshold?"
               gt-checkbox-label="Lower bound threshold"
               gt-model="config.condition.lowerBoundThreshold"
               gt-disabled="!agentRollup.permissions.config.edit.alerts">
            <div class="help-block">
              Alert if the {{phraseForValue()}} is less than or equal to the threshold, instead of alerting if the
              {{phraseForValue()}} is greater than or equal to the threshold.
            </div>
          </div>
          <div gt-form-group
               gt-label="Time period"
               gt-model="page.timePeriodMinutes"
               gt-number="true"
               gt-pattern="pattern.integer"
               gt-required="loaded"
               gt-disabled="!agentRollup.permissions.config.edit.alerts"
               gt-width="7em"
               gt-addon="minutes">
            <div class="help-block">
              The time period over which the {{phraseForValue()}} is calculated.
            </div>
          </div>
          <div gt-form-group
               gt-label="Minimum transaction count"
               gt-model="config.condition.minTransactionCount"
               gt-number="true"
               gt-pattern="pattern.integer"
               gt-required="loaded"
               gt-disabled="!agentRollup.permissions.config.edit.alerts"
               gt-width="7em"
               ng-if="showMinTransactionCount()">
            <div class="help-block">
              Time periods with very few transactions have much less meaningful metrics, so this can be used to
              suppress alerts from being generated unless the time period has a minimum transaction count.
            </div>
          </div>
        </div>
        <div ng-if="config.condition.conditionType === 'heartbeat'">
          <div gt-form-group
               gt-label="Time period"
               gt-model="config.condition.timePeriodSeconds"
               gt-number="true"
               gt-pattern="pattern.integer"
               gt-required="loaded"
               gt-disabled="!agentRollup.permissions.config.edit.alerts"
               gt-width="7em"
               gt-addon="seconds">
            <div class="help-block">
              The time period after which the alert is triggered if no heartbeat has been received from the agent.
              Heartbeats are normally received every 5 seconds.
            </div>
          </div>
        </div>
        <div ng-if="config.condition.conditionType === 'synthetic-monitor'">
          <div class="form-group row">
            <label class="col-xl-3 gt-form-label-xl"
                   for="syntheticMonitorId">
              Synthetic monitor
            </label>
            <div class="col-xl-9">
              <select ng-model="config.condition.syntheticMonitorId"
                      class="custom-select"
                      ng-required="loaded"
                      ng-disabled="!agentRollup.permissions.config.edit.alerts"
                      name="syntheticMonitorId"
                      id="syntheticMonitorId"
                      style="width: auto;">
                <option value="__________"
                        disabled
                        ng-if="!syntheticMonitors.length">
                  (there are no synthetic monitors available)
                </option>
                <option ng-repeat="syntheticMonitor in syntheticMonitors"
                        ng-value="syntheticMonitor.id">
                  {{syntheticMonitor.display}}
                </option>
              </select>
              <div class="help-block">
                The synthetic monitor that this alert is based on.
              </div>
            </div>
          </div>
          <div gt-form-group
               gt-label="Duration threshold"
               gt-model="config.condition.thresholdMillis"
               gt-number="true"
               gt-pattern="pattern.integer"
               gt-required="loaded"
               gt-disabled="!agentRollup.permissions.config.edit.alerts"
               gt-width="7em"
               gt-addon="milliseconds">
            <div class="help-block">
              If the synthetic monitor duration is greater than or equal to this, then it is considered a failure.
            </div>
          </div>
          <div gt-form-group
               gt-label="Consecutive count"
               gt-model="config.condition.consecutiveCount"
               gt-number="true"
               gt-pattern="pattern.positiveInteger"
               gt-required="loaded"
               gt-disabled="!agentRollup.permissions.config.edit.alerts"
               gt-width="7em">
            <div class="help-block">
              If the synthetic monitor fails this number of times in a row (by either exceeding the duration threshold
              or returning an error), then the alert will be triggered.
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset class="gt-fieldset">
        <legend class="gt-legend">
          Severity
        </legend>
        <div class="form-group row">
          <label class="col-xl-3 gt-form-label-xl"
                 for="severity">
            Severity
          </label>
          <div class="col-xl-9">
            <select ng-model="config.severity"
                    class="custom-select"
                    id="severity"
                    name="severity"
                    ng-required="loaded"
                    ng-disabled="!agentRollup.permissions.config.edit.alerts"
                    style="width: auto;">
              <option value="" ng-if="!config.severity"></option>
              <option value="critical">Critical</option>
              <option value="high">High</option>
              <option value="medium">Medium</option>
              <option value="low">Low</option>
            </select>
          </div>
        </div>
      </fieldset>
      <fieldset class="gt-fieldset">
        <legend class="gt-legend">
          Email notification
        </legend>
        <div gt-form-group
             gt-type="textarea"
             gt-label="Email addresses"
             gt-model="page.emailAddresses"
             gt-disabled="!agentRollup.permissions.config.edit.alerts"
             gt-width="30em">
          <div class="help-block">
            Comma separated list of email addresses.
          </div>
        </div>
      </fieldset>
      <fieldset class="gt-fieldset"
                ng-if="pagerDutyIntegrationKeys.length">
        <legend class="gt-legend">
          PagerDuty notification
        </legend>
        <div class="form-group row">
          <label class="col-xl-3 gt-form-label-xl"
                 for="pagerDutyIntegrationKey">
            Integration key
          </label>
          <div class="col-xl-9">
            <select ng-model="config.pagerDutyNotification.pagerDutyIntegrationKey"
                    ng-disabled="!agentRollup.permissions.config.edit.alerts"
                    class="custom-select"
                    name="pagerDutyIntegrationKey"
                    id="pagerDutyIntegrationKey"
                    style="width: auto;">
              <option value=""></option>
              <option
                  ng-repeat="pagerDutyIntegrationKey in pagerDutyIntegrationKeys track by pagerDutyIntegrationKey.key"
                  ng-value="pagerDutyIntegrationKey.key">
                {{pagerDutyIntegrationKey.display}} ({{pagerDutyIntegrationKey.key}})
              </option>
              <option ng-value="config.pagerDutyNotification.pagerDutyIntegrationKey"
                      disabled
                      ng-if="displayUnavailablePagerDutyIntegrationKey()">
                {{config.pagerDutyNotification.pagerDutyIntegrationKey}} (not available)
              </option>
            </select>
          </div>
        </div>
      </fieldset>
      <fieldset class="gt-fieldset"
                ng-if="slackWebhooks.length">
        <legend class="gt-legend">
          Slack notification
        </legend>
        <div class="form-group row">
          <label class="col-xl-3 gt-form-label-xl"
                 for="slackWebhook">
            Slack webhook
          </label>
          <div class="col-xl-9">
            <select ng-model="config.slackNotification.slackWebhookId"
                    ng-disabled="!agentRollup.permissions.config.edit.alerts"
                    class="custom-select"
                    name="slackWebhook"
                    id="slackWebhook"
                    style="width: auto;">
              <option value=""></option>
              <option ng-repeat="slackWebhook in slackWebhooks track by slackWebhook.id"
                      ng-value="slackWebhook.id">
                {{slackWebhook.display}}
              </option>
              <option ng-value="config.slackNotification.slackWebhook"
                      disabled
                      ng-if="displayUnavailableSlackWebhook()">
                {{config.slackNotification.slackWebhook}} (not available)
              </option>
            </select>
          </div>
        </div>
        <div gt-form-group
             gt-label="Slack channels"
             gt-model="page.slackChannels"
             gt-required="config.slackNotification.slackWebhookId"
             gt-disabled="!agentRollup.permissions.config.edit.alerts"
             gt-width="30em"
             ng-if="config.slackNotification.slackWebhookId">
          <div class="help-block">
            Comma separated list of channels, e.g. <em>#alerts</em>
          </div>
        </div>
      </fieldset>
      <div class="form-group row gt-form-buttons-below-fieldset"
           ng-if="agentRollup.permissions.config.edit.alerts">
        <div class="offset-xl-3 col-xl-9">
          <div gt-button-group>
            <div gt-button
                 gt-label="{{config.version ? 'Save changes' : 'Add'}}"
                 gt-click="save(deferred)"
                 gt-validate-form="formCtrl"
                 class="d-inline-block">
            </div>
            <div gt-button
                 ng-if="config.version"
                 gt-label="Delete"
                 gt-click="delete(deferred)"
                 gt-btn-class="btn-danger"
                 class="d-inline-block">
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- each page with confirmation dialog needs its own confirmation dom so that it is deleted on $destroy -->
<div ng-include="'template/gt-confirmation.html'"></div>
